<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue-router</title>
  </head>
  <body>
    <pre>
        props: (route) => ({ id: route.params.id,  name: 'Model6', age: '100', }),

      </pre
    >
    <!-- 第三步创建vue实例化挂载区 -->
    <div id="app">
      <!-- 第五步创建路由标签 -->
      <router-link to="/test">Model6</router-link>

      <!-- 第六部创建占位符 -->
      <router-view></router-view>
    </div>
    <!-- 第一步引入vue  -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 第二部引入vur-router -->
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>

    <script>
      const Model6 = {
        props: ['id', 'name', 'age'],
        template: `
          <div>
            id是{{id}} name是{{name}} 年龄是{{age}}
            </div>
          `,
      }

      // 第七步创建路由规则
      const luyou = new VueRouter({
        routes: [
          {
            path: '/test',
            component: Model6,
            props: (route) => ({
              id: route.params.id,
              name: 'Model6',
              age: '100',
            }),
          },
        ],
      })

      // 第四步实例化vue
      const vm = new Vue({
        el: '#app',
        data: {},
        // 第八步
        router: luyou,
      })
    </script>
  </body>
</html>
